<template>
  <view class="container">
    <view class="page-title">请选择申批类型</view>
    
    <uni-grid :column="2" :highlight="false"  :show-border="false" :square="false" @change="onGridItemClick">
      <uni-grid-item v-for="(item, index) in applyTypes" :key="index" :index="index">
        <view class="grid-item" :style="{ backgroundColor: item.bgColor }">
          <text class="grid-text">{{ item.text }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      applyTypes: [
        {
          text: '请假申批',
          type: 1,
          bgColor: '#FF4D4F',
          url: '/subpkg/form-detail/form-detail'
        },
        {
          text: '出差申批',
          type: 2,
          bgColor: '#2B7FF3',
          url: '/subpkg/form-detail/form-detail'
        },
        {
          text: '培训申批',
          type: 3,
          bgColor: '#13C2C2',
          url: '/subpkg/form-detail/form-detail'
        },
        {
          text: '合同申批',
          type: 4,
          bgColor: '#F759AB',
          url: '/subpkg/form-detail/form-detail'
        },
        {
          text: '采购申批',
          type: 5,
          bgColor: '#FF7A45',
          url: '/subpkg/form-detail/form-detail'
        },
        {
          text: '入职申批',
          type: 6,
          bgColor: '#722ED1',
          url: '/subpkg/form-detail/form-detail'
        },
        {
          text: '其他申批',
          type: 7,
          bgColor: '#52C41A',
          url: '/subpkg/form-detail/form-detail'
        }
      ]
    }
  },
  methods: {
    onGridItemClick(e) {
      const item = this.applyTypes[e.detail.index]
      uni.navigateTo({
        url: `${item.url}?type=${item.type}&title=${item.text}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: linear-gradient(180deg, #2B7FF3 0%, #F5F5F5 100%);
  min-height: 100vh;
}

.page-title {
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  padding: 30rpx 0;
}

:deep(.uni-grid) {
  padding: 20rpx;
}

:deep(.uni-grid-item) {
  padding: 10rpx !important;
}

.grid-item {
  width: 100%;
  height: 180rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 0;
  
  .grid-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}
</style> 